<template>
	<ul>
		<li class="news" v-for="(item, index) in new_list" :key="index">
			<div class="left">
				<div class="title">{{ item.title }}</div>
				<div class="info">
					<span>{{ item.source }}</span>
					<span>{{ item.time }}</span>
				</div>
			</div>
			<div class="right">
				<img :src="item.img" alt="">
			</div>
		</li>
	</ul>
</template>
<script setup>
	import { ref, onBeforeMount } from 'vue'
	import axios from 'axios'
	// 数据后续通过请求获取结果来复制
	const new_list = ref([])
	
	// http://hmajax.itheima.net/api/news
	const instance = axios.create({
		baseURL: 'http://hmajax.itheima.net/api/', // 基本请求路径
		timeout: 2000
	})
	// 组件挂载之前，获取新闻的初始数据
	onBeforeMount(() => {
		instance({
			url: 'news', // 请求路径，会拼接整体配置的baseUrl
			method: 'GET', // 请求方式
			// 扩展...
		}).then(result => {
			console.log('请求成功')
			// result的data属性才是服务端相应的数据
			console.log(result.data) // 还有message和data
			new_list.value = result.data.data
		}).catch(error => {
			console.log('请求失败')
			console.log(error)
		})
	})
</script>

<style scoped>
	* {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.news {
		display: flex;
		height: 120px;
		width: 600px;
		margin: 0 auto;
		padding: 20px 0;
		cursor: pointer;
	}

	.news .left {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding-right: 10px;
	}

	.news .left .title {
		font-size: 20px;
	}

	.news .left .info {
		color: #999999;
	}

	.news .left .info span {
		margin-right: 20px;
	}

	.news .right {
		width: 160px;
		height: 120px;
	}

	.news .right img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
</style>